<template>
  <div class="home-page">
    <!-- Hero Banner -->
    <section class="hero-section">
      <div class="hero-container">
        <div class="hero-content animate__animated animate__fadeInUp">
          <div class="robot-showcase">
            <div class="robot-icon-large animate-float">🤖</div>
            <div class="robot-glow"></div>
          </div>


          <h1 class="hero-title">
            <span class="gradient-text">AI梦工厂</span>
          </h1>

          <p class="hero-subtitle">支持最新Claude Code 4.5模型（Max）</p>

          <p class="hero-description">
            专业的Cursor激活服务平台，支持Claude Code 4.5模型，<br />
            为开发者提供高效、安全、稳定的AI编程体验
          </p>

          <div class="hero-features">
            <div class="feature-tag">
              <span class="feature-icon">⚡</span>
              <span>极速激活</span>
            </div>
            <div class="feature-tag">
              <span class="feature-icon">🛡️</span>
              <span>安全保障</span>
            </div>
            <div class="feature-tag">
              <span class="feature-icon">🎯</span>
              <span>精准匹配</span>
            </div>
          </div>

        </div>

        <div class="hero-stats animate__animated animate__fadeInRight">
          <div class="stat-item">
            <div class="stat-number gradient-text">50K+</div>
            <div class="stat-label">企业用户</div>
          </div>
          <div class="stat-item">
            <div class="stat-number gradient-text">100+</div>
            <div class="stat-label">AI工具支持</div>
          </div>
          <div class="stat-item">
            <div class="stat-number gradient-text">99.99%</div>
            <div class="stat-label">系统稳定性</div>
          </div>
          <div class="stat-item">
            <div class="stat-number gradient-text">24/7</div>
            <div class="stat-label">技术支持</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 产品生态模块 -->
    <section class="popular-section" ref="productsSection">
      <div class="section-container">
        <div class="section-header animate__animated animate__fadeInUp">
          <div class="header-badge">
            <span class="badge-icon">🔥</span>
            <span class="badge-label">FEATURED PRODUCTS</span>
          </div>
          <h2 class="section-title">
            <span class="gradient-text">Cursor AI编程助手</span>
          </h2>
          <p class="section-subtitle">
            支持Claude Code 4.5模型，智能代码补全和生成
          </p>
        </div>

        <div class="products-grid">
          <div
            v-for="(product, index) in popularProducts"
            :key="product.id"
            class="product-card tiktok-card animate__animated animate__fadeInUp"
            :style="{ animationDelay: `${index * 0.1}s` }"
            @click="$router.push(`/product/${product.id}`)"
          >
            <div class="product-header">
              <div class="product-icon-wrapper">
                <div class="product-icon">{{ product.icon }}</div>
                <div class="icon-glow"></div>
              </div>
              <div class="product-info">
                <h3 class="product-name">{{ product.name }}</h3>
                <span class="product-category">{{ product.category }}</span>
              </div>
              <n-tag
                v-if="product.popular"
                type="error"
                size="small"
                class="popular-tag"
              >
                <span class="popular-icon">🔥</span>
                热门
              </n-tag>
            </div>

            <p class="product-description">{{ product.description }}</p>

            <div class="product-features">
              <div class="features-label">核心特性</div>
              <div class="features-list">
                <n-tag
                  v-for="feature in product.features.slice(0, 3)"
                  :key="feature"
                  size="small"
                  class="feature-tag"
                >
                  {{ feature }}
                </n-tag>
              </div>
            </div>

            <div class="product-footer">
              <div class="product-pricing">
                <div class="price-item">
                  <span class="price-label">企业版</span>
                  <span class="price-value gradient-text"
                    >¥{{ product.pricing.monthly }}</span
                  >
                  <span class="price-period">/月</span>
                </div>
              </div>
              <n-button
                type="primary"
                size="medium"
                class="tiktok-btn product-btn"
              >
                立即获取 →
              </n-button>
            </div>
          </div>
        </div>

        <div class="view-all-section">
          <div class="view-all-content">
            <div class="view-all-text">
              <h3>Cursor专业激活服务</h3>
              <p>支持Claude Code 4.5模型，提供稳定的AI编程体验</p>
            </div>
            <n-button
              type="primary"
              size="large"
              class="tiktok-btn view-all-btn"
              @click="scrollToProducts"
            >
              立即购买 →
            </n-button>
          </div>
        </div>
      </div>
    </section>

    <!-- 价格模块 -->
    <section class="pricing-section">
      <div class="section-container">
        <div class="section-header animate__animated animate__fadeInUp">
          <div class="header-badge">
            <span class="badge-icon">💎</span>
            <span class="badge-label">CURSOR PRICING</span>
          </div>
          <h2 class="section-title">
            <span class="gradient-text">Cursor套餐选择</span>
          </h2>
          <p class="section-subtitle">
            支持Claude Code 4.5模型，多种套餐满足不同开发需求
          </p>
        </div>

        <!-- 普通版套餐 -->
        <div class="plan-category">
          <div class="category-header">
            <h3 class="category-title">🎯 普通版</h3>
            <p class="category-desc">适合个人开发者，基础功能完整</p>
          </div>
          <div class="pricing-grid">
            <div
              v-for="(plan, index) in standardPlans"
              :key="plan.type"
              class="pricing-card tiktok-card animate__animated animate__fadeInUp"
              :style="{ animationDelay: `${index * 0.1}s` }"
            >
              <div class="plan-header">
                <div class="plan-icon">
                  <div class="icon-wrapper" :class="`icon-${plan.icon}`"></div>
                </div>
                <h3 class="plan-name">{{ plan.name }}</h3>
                <p class="plan-description">{{ plan.description }}</p>
              </div>

              <div class="plan-pricing">
                <span class="plan-price gradient-text">¥{{ plan.price }}</span>
                <span class="plan-period">/ {{ plan.period }}</span>
              </div>

              <div class="plan-features">
                <div
                  v-for="feature in plan.features"
                  :key="feature"
                  class="plan-feature"
                >
                  <span class="feature-icon">✓</span>
                  <span>{{ feature }}</span>
                </div>
              </div>

              <n-button
                type="primary"
                size="large"
                block
                class="tiktok-btn"
                @click="handleSelectPlan(plan)"
              >
                立即购买
              </n-button>
            </div>
          </div>
        </div>

        <!-- 高级版套餐 -->
        <div class="plan-category">
          <div class="category-header">
            <h3 class="category-title">🚀 高级版（免魔法）</h3>
            <p class="category-desc">企业级服务，无需网络配置，开箱即用</p>
          </div>
          <div class="pricing-grid">
            <div
              v-for="(plan, index) in premiumPlans"
              :key="plan.type"
              class="pricing-card tiktok-card animate__animated animate__fadeInUp premium-card"
              :style="{ animationDelay: `${(index + 4) * 0.1}s` }"
            >
              <div class="plan-header">
                <div class="plan-icon">
                  <div class="icon-wrapper" :class="`icon-${plan.icon}`"></div>
                </div>
                <h3 class="plan-name">{{ plan.name }}</h3>
                <p class="plan-description">{{ plan.description }}</p>
              </div>

              <div class="plan-pricing">
                <span class="plan-price gradient-text">¥{{ plan.price }}</span>
                <span class="plan-period">/ {{ plan.period }}</span>
              </div>

              <div class="plan-features">
                <div
                  v-for="feature in plan.features"
                  :key="feature"
                  class="plan-feature"
                >
                  <span class="feature-icon">✓</span>
                  <span>{{ feature }}</span>
                </div>
              </div>

              <n-button
                type="primary"
                size="large"
                block
                class="tiktok-btn premium-btn"
                @click="handleSelectPlan(plan)"
              >
                立即购买
              </n-button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 精简购买弹窗 -->
    <n-modal v-model:show="showPurchaseModal" class="purchase-modal">
      <n-card
        style="width: 500px"
        title="购买套餐"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
        class="purchase-card"
      >
        <template #header-extra>
          <n-button quaternary @click="showPurchaseModal = false">
            <n-icon size="20">×</n-icon>
          </n-button>
        </template>

        <div class="purchase-content">
          <!-- 套餐信息 -->
          <div class="selected-plan">
            <div class="plan-info">
              <div class="plan-icon-small">
                <div
                  class="icon-wrapper"
                  :class="`icon-${selectedPlan?.icon}`"
                ></div>
              </div>
              <div class="plan-details">
                <h3>{{ selectedPlan?.name }}</h3>
                <div class="plan-price">
                  <span class="price">¥{{ selectedPlan?.price }}</span>
                  <span class="period">/ {{ selectedPlan?.period }}</span>
                </div>
              </div>
              <div class="plan-badge">
                {{
                  selectedPlan?.type?.includes("premium")
                    ? "🚀 高级版"
                    : "🎯 普通版"
                }}
              </div>
            </div>
          </div>

          <!-- QQ群二维码 -->
          <div class="qr-section">
            <div class="qr-header">
              <span class="qr-title">💬 Cursor交流群-6号</span>
              <span class="group-number">1013099557</span>
            </div>
            <div class="qr-content">
              <div class="qr-code">
                <img
                  src="@/assets/qqcode.jpg"
                  alt="QQ群二维码"
                  class="qr-image"
                />
              </div>
              <div class="qr-steps">
                <div class="step">
                  <div class="step-num">1</div>
                  <span>扫码加群</span>
                </div>
                <div class="step">
                  <div class="step-num">2</div>
                  <span>联系群主</span>
                </div>
                <div class="step">
                  <div class="step-num">3</div>
                  <span>即时到账</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 购买提示 -->
          <div class="purchase-tip">
            💡 支持多种付款方式，激活码即时到账，享受专业技术支持
          </div>
        </div>

        <template #footer>
          <div class="modal-actions">
            <n-button @click="showPurchaseModal = false" class="cancel-btn">
              稍后购买
            </n-button>
            <n-button
              type="primary"
              class="tiktok-btn confirm-btn"
              @click="copyGroupNumber"
            >
              复制群号
            </n-button>
          </div>
        </template>
      </n-card>
    </n-modal>

    <!-- 特色功能说明 -->
    <section class="merchant-section">
      <div class="section-container">
        <div class="merchant-banner tiktok-card">
          <div class="merchant-content">
            <div class="merchant-info">
              <h3 class="merchant-title">
                <span class="gradient-text">Claude Code 4.5模型支持</span>
              </h3>
              <p class="merchant-description">
                最新AI模型，带来更智能的编程体验
              </p>
              <ul class="merchant-benefits">
                <li>🚀 更快的响应速度</li>
                <li>🎯 更准确的代码生成</li>
                <li>💡 更智能的代码建议</li>
                <li>🔧 更强大的调试能力</li>
              </ul>
            </div>

            <div class="merchant-action">
              <n-button
                type="primary"
                size="large"
                class="tiktok-btn merchant-btn"
                @click="scrollToProducts"
              >
                立即体验
              </n-button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useMessage } from "naive-ui";
import { useAppStore } from "@/stores";

const message = useMessage();
const appStore = useAppStore();
const productsSection = ref<HTMLElement>();

// 购买弹窗相关
const showPurchaseModal = ref(false);
const selectedPlan = ref<any>(null);

// 计算属性
const popularProducts = computed(() => appStore.popularProducts);

// 普通版套餐
const standardPlans = [
  {
    type: "daily-standard",
    name: "天卡",
    description: "短期体验",
    price: 5.9,
    period: "天",
    icon: "flash",
    features: ["24小时有效期", "Claude Code 4.5模型", "智能代码补全", "AI对话编程"],
  },
  {
    type: "weekly-standard",
    name: "周卡",
    description: "一周体验",
    price: 16.9,
    period: "周",
    icon: "calendar",
    features: ["7天有效期", "Claude Code 4.5模型", "完整功能访问", "优先技术支持"],
  },
  {
    type: "monthly-standard",
    name: "月卡",
    description: "性价比之选",
    price: 39.9,
    period: "月",
    icon: "star",
    features: ["30天有效期", "Claude Code 4.5模型", "全功能解锁", "VIP客服支持"],
  },
  {
    type: "quarterly-standard",
    name: "季卡",
    description: "长期优惠",
    price: 99.9,
    period: "季",
    icon: "diamond",
    features: ["90天有效期", "Claude Code 4.5模型", "专业版功能", "专属客服经理"],
  },
];

// 高级版（免魔法）套餐
const premiumPlans = [
  {
    type: "daily-premium",
    name: "天卡",
    description: "免魔法直连",
    price: 5.9,
    period: "天",
    icon: "rocket",
    features: [
      "24小时有效期",
      "Claude Code 4.5模型",
      "免魔法直连服务",
      "无需网络配置",
    ],
  },
  {
    type: "weekly-premium",
    name: "周卡",
    description: "企业级体验",
    price: 19.9,
    period: "周",
    icon: "shield",
    features: ["7天有效期", "Claude Code 4.5模型", "企业级网络", "稳定连接保障"],
  },
  {
    type: "monthly-premium",
    name: "月卡",
    description: "企业优选",
    price: 49.9,
    period: "月",
    icon: "crown",
    features: ["30天有效期", "Claude Code 4.5模型", "专线网络加速", "专属技术顾问"],
  },
  {
    type: "quarterly-premium",
    name: "季卡",
    description: "企业首选",
    price: 129,
    period: "季",
    icon: "business",
    features: ["90天有效期", "Claude Code 4.5模型", "企业专属通道", "团队协作功能"],
  },
];

// 方法
const scrollToProducts = () => {
  productsSection.value?.scrollIntoView({
    behavior: "smooth",
  });
};

const handleSelectPlan = (plan: any) => {
  // 直接跳转到购买页面
  window.open('https://pay.ldxp.cn/shop/rpmn', '_blank');
};

const copyGroupNumber = async () => {
  try {
    await navigator.clipboard.writeText("1013099557");
    message.success("群号已复制到剪贴板");
  } catch (error) {
    message.error("复制失败，群号：1013099557");
  }
};

// 生命周期
onMounted(() => {
  // 添加滚动动画效果
  const observerOptions = {
    threshold: 0.1,
    rootMargin: "0px 0px -50px 0px",
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("animate__animated", "animate__fadeInUp");
      }
    });
  }, observerOptions);

  // 观察所有需要动画的元素
  document.querySelectorAll(".tiktok-card").forEach((el) => {
    observer.observe(el);
  });
});
</script>

<style scoped>
.home-page {
  min-height: 100vh;
}

/* Hero Section */
.hero-section {
  min-height: 100vh;
  background: linear-gradient(135deg, #000000 0%, #161823 50%, #2f2f2f 100%);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(254, 44, 85, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.hero-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.hero-content {
  flex: 1;
  max-width: 600px;
}

.robot-showcase {
  position: relative;
  display: inline-block;
  margin-bottom: 32px;
}

.robot-icon-large {
  font-size: 120px;
  filter: drop-shadow(0 0 30px rgba(254, 44, 85, 0.6));
  z-index: 2;
  position: relative;
}

.robot-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(
    circle,
    rgba(254, 44, 85, 0.3) 0%,
    rgba(139, 92, 246, 0.2) 50%,
    transparent 70%
  );
  border-radius: 50%;
  animation: glow 3s ease-in-out infinite alternate;
  z-index: 1;
}

.hero-badge {
  display: inline-block;
  margin-bottom: 24px;
  padding: 0;
}

.badge-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(254, 44, 85, 0.1);
  border: 1px solid rgba(254, 44, 85, 0.3);
  border-radius: 30px;
  color: #fe2c55;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.badge-text:hover {
  background: rgba(254, 44, 85, 0.15);
  border-color: rgba(254, 44, 85, 0.5);
  transform: translateY(-2px);
}

.hero-title {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -2px;
}

.hero-subtitle {
  font-size: 1.5rem;
  color: #cccccc;
  font-weight: 600;
  margin-bottom: 16px;
}

.hero-description {
  font-size: 1.1rem;
  color: #999999;
  line-height: 1.8;
  margin-bottom: 32px;
}

.hero-features {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.feature-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.feature-tag:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(254, 44, 85, 0.3);
  transform: translateY(-2px);
}

.feature-icon {
  font-size: 1rem;
}

.hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.hero-btn {
  padding: 16px 32px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

.learn-more-btn {
  color: #cccccc !important;
  border: 2px solid #333333 !important;
  padding: 14px 28px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

.learn-more-btn:hover {
  border-color: #fe2c55 !important;
  color: #ffffff !important;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 32px;
  background: rgba(22, 24, 35, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(254, 44, 85, 0.2);
  min-width: 320px;
  max-width: 400px;
}

.stat-item {
  text-align: center;
  padding: 16px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(254, 44, 85, 0.3);
  transform: translateY(-2px);
}

.stat-number {
  font-size: 2.2rem;
  font-weight: 800;
  display: block;
  margin-bottom: 6px;
}

.stat-label {
  color: #cccccc;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Section Styles */
.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(254, 44, 85, 0.1);
  border: 1px solid rgba(254, 44, 85, 0.3);
  border-radius: 20px;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
}

.badge-icon {
  font-size: 1rem;
}

.badge-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fe2c55;
  letter-spacing: 1px;
}

.section-title {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.2;
}

.section-subtitle {
  font-size: 1.2rem;
  color: #999999;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Products Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.product-card {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(254, 44, 85, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

.product-card:hover::before {
  left: 100%;
}

.product-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.product-icon-wrapper {
  position: relative;
  margin-right: 16px;
}

.product-icon {
  font-size: 2.2rem;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(254, 44, 85, 0.1);
  border: 1px solid rgba(254, 44, 85, 0.2);
  border-radius: 16px;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.icon-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: radial-gradient(
    circle,
    rgba(254, 44, 85, 0.2) 0%,
    transparent 70%
  );
  border-radius: 50%;
  animation: iconGlow 2s ease-in-out infinite alternate;
  z-index: 1;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: #ffffff;
}

.product-category {
  color: #fe2c55;
  font-size: 0.9rem;
  font-weight: 500;
}

.popular-tag {
  background: linear-gradient(135deg, #fe2c55, #8b5cf6) !important;
  border: none !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.popular-icon {
  font-size: 0.8rem;
  animation: bounce 1s ease-in-out infinite alternate;
}

.product-description {
  color: #cccccc;
  line-height: 1.6;
  margin-bottom: 20px;
}

.product-features {
  margin-bottom: 24px;
}

.features-label {
  font-size: 0.9rem;
  color: #999999;
  font-weight: 500;
  margin-bottom: 12px;
}

.features-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-tag {
  background: rgba(139, 92, 246, 0.2) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  color: #8b5cf6 !important;
}

.product-pricing {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.price-label {
  font-size: 0.85rem;
  color: #999999;
  font-weight: 500;
}

.price-value {
  font-size: 1.4rem;
  font-weight: 800;
}

.price-period {
  font-size: 0.9rem;
  color: #999999;
  font-weight: 400;
}

.product-btn {
  padding: 8px 16px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

.view-all-section {
  margin-top: 60px;
  padding: 40px;
  background: rgba(22, 24, 35, 0.6);
  border: 1px solid rgba(254, 44, 85, 0.2);
  border-radius: 24px;
  backdrop-filter: blur(10px);
}

.view-all-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  gap: 32px;
}

.view-all-text {
  text-align: left;
  flex: 1;
}

.view-all-text h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

.view-all-text p {
  color: #999999;
  font-size: 1rem;
  margin: 0;
  line-height: 1.5;
}

.view-all-btn {
  padding: 16px 32px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.view-all-btn {
  color: #cccccc !important;
  border: 2px solid #333333 !important;
  padding: 12px 24px !important;
}

.view-all-btn:hover {
  border-color: #fe2c55 !important;
  color: #ffffff !important;
}

/* Plan Category */
.plan-category {
  margin-bottom: 60px;
}

.plan-category:last-child {
  margin-bottom: 0;
}

.category-header {
  text-align: center;
  margin-bottom: 40px;
}

.category-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.category-desc {
  color: #999999;
  font-size: 1rem;
  margin: 0;
}

/* Pricing Grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.pricing-card {
  position: relative;
  text-align: center;
}

.premium-card {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.05) 0%,
    rgba(255, 140, 0, 0.05) 100%
  ) !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
}

.plan-header {
  margin-bottom: 24px;
  position: relative;
}

.plan-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  background: rgba(254, 44, 85, 0.1);
  border: 2px solid rgba(254, 44, 85, 0.2);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.plan-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(254, 44, 85, 0.05) 0%,
    rgba(139, 92, 246, 0.05) 100%
  );
  border-radius: 14px;
}

.plan-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #ffffff;
}

.plan-description {
  color: #cccccc;
  font-size: 0.9rem;
}

.plan-pricing {
  margin-bottom: 32px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.plan-price {
  font-size: 3rem;
  font-weight: 800;
}

.plan-period {
  color: #999999;
  font-size: 1.1rem;
}

.plan-features {
  margin-bottom: 32px;
  text-align: left;
}

.plan-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: #cccccc;
}

.feature-icon {
  color: #25f4ee;
  flex-shrink: 0;
}

.plan-btn {
  color: #cccccc !important;
  border: 2px solid #333333 !important;
}

.plan-btn:hover {
  border-color: #fe2c55 !important;
  color: #ffffff !important;
}

/* Merchant Section */
.merchant-section {
  background: linear-gradient(
    135deg,
    rgba(22, 24, 35, 0.8) 0%,
    rgba(47, 47, 47, 0.6) 100%
  );
}

.merchant-banner {
  background: linear-gradient(
    135deg,
    rgba(254, 44, 85, 0.1) 0%,
    rgba(139, 92, 246, 0.1) 100%
  );
  border: 1px solid rgba(254, 44, 85, 0.3);
}

.merchant-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.merchant-info {
  flex: 1;
}

.merchant-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.merchant-description {
  font-size: 1.1rem;
  color: #cccccc;
  margin-bottom: 24px;
  line-height: 1.6;
}

.merchant-benefits {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.merchant-benefits li {
  color: #cccccc;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.merchant-action {
  flex-shrink: 0;
}

.merchant-btn {
  padding: 16px 32px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .hero-container {
    flex-direction: column;
    text-align: center;
    gap: 60px;
  }

  .hero-stats {
    flex-direction: row;
    justify-content: center;
  }

  .merchant-content {
    flex-direction: column;
    text-align: center;
  }

  .merchant-benefits {
    grid-template-columns: 1fr;
  }
}

.premium-btn {
  background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
  border: none !important;
  color: #000000 !important;
  font-weight: 700 !important;
}

.premium-btn:hover {
  background: linear-gradient(135deg, #ff8c00, #ffd700) !important;
  transform: translateY(-2px);
}

@media (max-width: 1200px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 3rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .category-title {
    font-size: 1.5rem;
    flex-direction: column;
    gap: 8px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* 精简购买弹窗样式 */
.purchase-modal {
  z-index: 9999;
}

.purchase-card {
  background: rgba(22, 24, 35, 0.95) !important;
  border: 1px solid rgba(254, 44, 85, 0.2) !important;
  backdrop-filter: blur(20px);
}

.purchase-content {
  padding: 0;
}

/* 套餐信息区域 */
.selected-plan {
  background: rgba(254, 44, 85, 0.05);
  border: 1px solid rgba(254, 44, 85, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.plan-info {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.plan-icon-small {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(254, 44, 85, 0.1);
  border: 2px solid rgba(254, 44, 85, 0.3);
  border-radius: 10px;
  flex-shrink: 0;
}

.plan-details h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.plan-price .price {
  font-size: 1.3rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fe2c55, #8b5cf6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.plan-price .period {
  font-size: 0.8rem;
  color: #999999;
}

.plan-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 4px 8px;
  background: rgba(254, 44, 85, 0.2);
  border: 1px solid rgba(254, 44, 85, 0.4);
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fe2c55;
}

/* QQ群区域 */
.qr-section {
  margin-bottom: 20px;
}

.qr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.qr-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
}

.group-number {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fe2c55;
  padding: 2px 8px;
  background: rgba(254, 44, 85, 0.1);
  border-radius: 8px;
}

.qr-content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
  padding: 12px 0;
}

.qr-code {
  flex-shrink: 0;
  padding: 6px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.qr-image {
  width: 160px;
  height: 160px;
  border-radius: 8px;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(254, 44, 85, 0.2);
}

.qr-steps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #cccccc;
}

.step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fe2c55, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #ffffff;
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* 购买提示 */
.purchase-tip {
  font-size: 0.8rem;
  color: #999999;
  text-align: center;
  padding: 12px;
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 8px;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* 底部按钮 */
.modal-actions {
  display: flex;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cancel-btn {
  flex: 1;
  color: #cccccc !important;
  border: 2px solid #333333 !important;
}

.cancel-btn:hover {
  border-color: #fe2c55 !important;
  color: #ffffff !important;
}

.confirm-btn {
  flex: 1;
  font-weight: 600 !important;
}

/* 移动端适配 */
@media (max-width: 600px) {
  .purchase-card {
    width: 90vw !important;
    max-width: 400px;
  }

  .qr-image {
    width: 140px;
    height: 140px;
  }

  .qr-content {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .qr-steps {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
  }

  .step {
    flex-direction: column;
    gap: 4px;
  }
}

/* 专业图标样式 */
.icon-wrapper {
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 2;
}

.plan-icon-large .icon-wrapper {
  width: 48px;
  height: 48px;
}

/* 闪电图标 */
.icon-flash::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 32px;
  background: linear-gradient(135deg, #fe2c55, #ff6b35);
  clip-path: polygon(60% 0%, 100% 35%, 80% 35%, 75% 100%, 35% 65%, 60% 65%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 日历图标 */
.icon-calendar::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 20px;
  background: linear-gradient(135deg, #fe2c55, #8b5cf6);
  border-radius: 4px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-calendar::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 0 rgba(255, 255, 255, 0.9);
}

/* 星星图标 */
.icon-star::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #fe2c55, #ffd700);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 钻石图标 */
.icon-diamond::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  clip-path: polygon(50% 0%, 80% 20%, 100% 60%, 50% 100%, 0% 60%, 20% 20%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 火箭图标 */
.icon-rocket::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 32px;
  background: linear-gradient(135deg, #ff6b35, #fe2c55);
  clip-path: polygon(
    50% 0%,
    80% 70%,
    60% 70%,
    60% 100%,
    40% 100%,
    40% 70%,
    20% 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 盾牌图标 */
.icon-shield::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 28px;
  background: linear-gradient(135deg, #10b981, #3b82f6);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 皇冠图标 */
.icon-crown::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 20px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  clip-path: polygon(
    20% 100%,
    0% 40%,
    20% 60%,
    50% 20%,
    80% 60%,
    100% 40%,
    80% 100%
  );
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-crown::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 4px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  border-radius: 2px;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

/* 商务图标 */
.icon-business::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 24px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-business::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 0 -6px rgba(255, 255, 255, 0.9);
}

/* 高级版图标效果 */
.premium-card .icon-wrapper::before {
  background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
}

.premium-card .icon-crown::before,
.premium-card .icon-crown::after {
  background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
}

.premium-card .icon-rocket::before {
  background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
}

.premium-card .icon-shield::before {
  background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
}

.premium-card .icon-business::before {
  background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
}

/* 图标悬浮效果 */
.icon-wrapper {
  transition: all 0.3s ease;
}

.pricing-card:hover .icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}

.premium-card:hover .icon-wrapper {
  transform: scale(1.1) rotate(-5deg);
}
</style>
